大家好！

今天我們要實作向下滾動網頁時，自動隱藏頁手或導覽列的效果。
我們進入今天的主題吧！

樣式

header {
    transition: transform 0.5s;
}

header.invisible {
    transform: translateY(-100%);
}

程式碼

(function () {
    let prevPos = window.pageYOffset;
    const header = Felix('header')[0];
    Felix(window).on('scroll', function () {
        const currPos = window.pageYOffset;
        const status = currPos > prevPos && currPos > header.getBoundingClientRect().bottom;
        header.classList[status ? 'add' : 'remove']('invisible');
        prevPos = currPos;
    });
})();

實測

<header>
    <!-- ... -->
</header>

範例連結製作中。

差不多也到尾聲了。
如果對文章有任何疑問，也歡迎在下方提問和建議！
我是 Felix，我們明天再見！